<template>
    <div class="Zky_Drawer" v-if="hidden" @click.self="close">
        <div class="Zky_DrawerBox" :class="prop.position" :key="prop.position" ref="Zky_DrawerBox">
            <header class="Zky_DrawerBoxHead FontSize_text marginBottom1">
                <span class="Zky_DrawerBoxHeadTitle" :class="prop.center">{{ prop.title }}</span>
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="svg" @click="close">
                    <path fill="currentColor"
                        d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z">
                    </path>
                </svg>
            </header>
            <main style="height: 100%;padding:10px;">
                <slot></slot>
            </main>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
const Zky_DrawerBox = ref()
const prop = defineProps({
    // 控制弹窗显示与消失
    hidden: {
        type: Boolean,
        default: false
    },

    // 控制弹窗位置,支持top/left/right/bottom
    position: {
        type: String,
        default: "left"
    },
    // 控制标题是否居中，支持left/center
    center: {
        type: String,
        default: "TitleLeft"
    },
    // 控制标题文字 
    title: {
        type: String,
        default: "TitleLeft"
    }
})
const position = ref("-100%")
const emit = defineEmits(["update:hidden"])
// 关闭弹窗
const close = () => {

    position.value = "-100%"
    setTimeout(() => {
        emit("update:hidden", false)
    }, 450)

}
watch(() => prop.hidden, () => {
    setTimeout(() => {
        const dom = document.querySelector(".Zky_DrawerBox")
        if (dom) {
            position.value = "0px"
        }

    }, 0)
})
// onUpdated(() => {
//     const dom = document.querySelector(".Zky_DrawerBox")
//     dom.style.top = 0
//     setTimeout(() => {

//         // switch (prop.position) {
//         //     case "left":
//         //         Zky_DrawerBox.value.style.left = "0px"
//         //         break
//         //     case "right":
//         //         Zky_DrawerBox.value.style.right = "0px"
//         //         break
//         //     case "top":
//         //         Zky_DrawerBox.value.style.top = "0px"
//         //         break
//         //     case "bottom":
//         //         Zky_DrawerBox.value.style.bottom = "0px"
//         //         break
//         // }
//     }, 0)

// })

</script>

<style lang="scss" scoped>
.Zky_Drawer {
    position: fixed;
    z-index: 100;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.4);

}

.Zky_DrawerBox {
    position: fixed;
    background: #fff;
    color: #000000;
    box-sizing: border-box;
    transition: all 0.6s;

    .Zky_DrawerBoxHead {
        width: 100%;
        height: 5%;
        position: relative;
        border-bottom: 1px dashed #888;

        .Zky_DrawerBoxHeadTitle {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: inline-block;
        }

        .TitleCenter {
            left: 50%;
            transform: translate(-50%, -50%)
        }

        .TitleLeft {
            left: 10px;
        }

        .svg {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
    }
}

$position: v-bind(position);

.left {
    top: 0;
    left: $position;
    width: 40%;
    height: 100%;
}

.right {
    right: $position;
    top: 0;
    width: 40%;
    height: 100%;
}

.top {
    top: $position;
    left: 0;
    width: 100%;
    height: 40%;
}

.botton {
    bottom: $position;
    left: 0;
    width: 100%;
    height: 40%;
}
</style>